<template>
  <div class="index-container">
    <!-- 头部导航区域 -->
    <header class="app-header">
      <ElDescriptions class="header-content" title="考研资料分享系统">
        <template #extra>
          <div class="user-actions">
            <ElDropdown placement="bottom-end" trigger="click">
              <template #trigger>
                <img
                    src="../img/user2.jpg"
                    alt="用户头像"
                    class="user-avatar"
                />
              </template>
              <ElDropdownMenu>
                <ElDropdownItem @click="navigateToPersonal">
                  <i class="el-icon-user"></i> 个人中心
                </ElDropdownItem>
                <ElDropdownItem @click="logout">
                  <i class="el-icon-switch-button"></i> 退出登录
                </ElDropdownItem>
              </ElDropdownMenu>
            </ElDropdown>
          </div>
        </template>
      </ElDescriptions>
    </header>

    <!-- 主菜单区域 -->
    <nav class="main-navigation">
      <ElMenu
          class="navigation-menu"
          mode="horizontal"
          :default-active="activeMenuIndex"
          router
          :unique-opened="false"
      >
        <!-- 考研科目列表 -->
        <ElSubMenu index="0">
          <template #title>
            <i class="el-icon-notebook-2"></i> 考研科目列表
          </template>
          <ElSubMenu
              v-for="(subjectGroup, groupName) in categorizedSubjects"
              :key="groupName"
              :index="`sub-${groupName}`"
          >
            <template #title>{{ groupName }}</template>
            <ElMenuItem
                v-for="subject in subjectGroup"
                :key="subject.id"
                :index="`/filelist?id=${subject.id}`"
            >
              {{ subject.name }}
            </ElMenuItem>
          </ElSubMenu>
        </ElSubMenu>

        <!-- 院校资料 -->
        <ElMenuItem @click="navigateToSchoolInfo">
          <i class="el-icon-s-order"></i>
          <span>院校资料</span>
        </ElMenuItem>

        <!-- 每日一句 -->
        <ElMenuItem index="/oneword">
          <i class="el-icon-edit"></i>
          <span>每日一句</span>
        </ElMenuItem>
      </ElMenu>
    </nav>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useCookies } from '@vueuse/integrations/useCookies';
import { useRouter } from 'vue-router';
import axios from 'axios';
import {
  ElDescriptions,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElMenu,
  ElSubMenu,
  ElMenuItem,
  ElMessage
} from 'element-plus';

// 常量定义
const SCHOOL_URL_MAP = {
  中山大学: 'http://www.sysu.edu.cn/',
  北京大学: 'https://www.pku.edu.cn/',
  默认: 'https://yz.chsi.com.cn/'
};

// 路由和状态管理
const router = useRouter();
const cookies = useCookies();
const userId = cookies.get('uid');
const activeMenuIndex = ref('/oneword');
const categorizedSubjects = ref({});

/**
 * 获取分类科目列表
 */
const fetchSubjectList = async () => {
  try {
    const { data } = await axios.get('/ky/user/subjectlist');
    categorizedSubjects.value = data.data || {};
  } catch (error) {
    console.error('获取科目列表失败:', error);
    ElMessage.error('获取科目列表失败，请稍后重试');
  }
};

/**
 * 跳转到院校官网
 */
const navigateToSchoolInfo = async () => {
  try {
    const { data } = await axios.get(`/ky/user/getOne?id=${userId}`);
    const school = data.data?.tschool;
    const targetUrl = SCHOOL_URL_MAP[school] || SCHOOL_URL_MAP.默认;
    window.open(targetUrl, '_blank');
  } catch (error) {
    console.error('获取院校信息失败:', error);
    window.open(SCHOOL_URL_MAP.默认, '_blank');
  }
};

/**
 * 跳转到个人中心
 */
const navigateToPersonal = () => {
  router.push('/personal');
};

/**
 * 退出登录
 */
const logout = () => {
  cookies.remove('uid');
  router.push('/');
};

// 组件挂载时获取数据
onMounted(() => {
  fetchSubjectList();
});
</script>

<style scoped>
.index-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  width: 100%;
  height: 60px;
  background-color: #7ebaae;
  display: flex;
  align-items: center;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.05);
}

.main-navigation {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.navigation-menu {
  max-width: 1200px;
  margin: 0 auto;
}

.el-menu-item,
.el-submenu__title {
  padding: 0 20px;
  font-size: 16px;
  transition: all 0.3s;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #f0f9f5;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .app-header {
    padding: 0 12px;
    height: 50px;
  }

  .el-menu-item,
  .el-submenu__title {
    padding: 0 12px;
    font-size: 14px;
  }
}
</style>